<template>
  <div id="map">
    <div id="mouse-position"></div>
    <div class="toggle">
      <img src="@/assets/images/卫星图.png" @click="toggleImg" />
      <img src="@/assets/images/矢量图.png" @click="toggleVec" />
    </div>
  </div>
  <MapTools />
  <MapCatalog />
  <TheVideoPopup />
  <ReportNotice />
</template>

<script setup>
import MapTools from './MapTools.vue'
import MapCatalog from './MapCatalog.vue'
import TheVideoPopup from '../Dialog/TheVideoPopup/TheVideoPopup.vue'
import ReportNotice from '../Dialog/ReportNotice/ReportNotice.vue'
import { initMap } from './Hooks/initMap'
import { useToggleMap } from './Hooks/useToggleMap'
initMap()
const { toggleVec, toggleImg } = useToggleMap()
</script>

<!----------------- 控件样式 ----------------->
<style>
/* 鹰眼 */
.ol-custom-overviewmap {
  position: fixed;
  right: 0;
  bottom: 0;
  top: auto;
  left: auto;
}
.ol-overviewmap-box {
  border: 2px dotted #ff2d51;
}
.ol-overviewmap:not(.ol-collapsed) button {
  bottom: 4px;
  left: 3px;
  position: absolute;
}
/* 鼠标位置 */
.custom-mouse-position {
  position: absolute;
  bottom: 35px;
  left: 8px;
  width: 200px;
  height: 20px;
  color: #ff2d51;
  font-size: 16px;
  font-family: '微软雅黑';
}
</style>
<style scoped>
#map {
  width: 100%;
  height: calc(100vh - 50px);
}
.toggle {
  z-index: 100;
  position: fixed;
  bottom: 5px;
  right: 170px;
  display: flex;
  justify-content: space-between;
  width: 180px;
  height: 80px;
}
.toggle img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  object-position: left top;
  transition: all 1s;
  cursor: pointer;
}
.toggle img:hover {
  object-position: right bottom;
  box-shadow: 0 0 0 2px #ff2d51;
}
</style>
